<template>
  <header>
    <div class="top-wrapper">
      <div class="top">
        <div class="left">
          <div class="logo" @click="handleEvent('/home')" title="返回首页">
            {{ author }}的个人博客
          </div>
          <span class="search">
          <SearchOutlined/>
          <a-select
              v-model:value="state.inputVal"
              show-search
              placeholder="请输入"
              style="width: 15rem"
              :default-active-first-option="false"
              :show-arrow="false"
              :filter-option="false"
              :not-found-content="null"
              :options="searchList"
              @search="handleSearch"
              @change="handleChange"
          ></a-select>
        </span>
        </div>
        <nav class="pc-list">
        <span
            v-for="(item, idx) in navList"
            :key="idx"
            class="nav-item"
            @click="handleEvent(item.url)"
        >
          <component :is="item.icon" class="icon-item trigger"/>
          {{ item.title }}
        </span>
        </nav>
        <div class="mobile-ilst">
          <UnorderedListOutlined
              v-if="!state.menuVisible"
              @click="state.menuVisible = true"
              :style="{ fontSize: '1.8rem' }"
          />
          <CloseOutlined
              v-else
              @click="state.menuVisible = false"
              :style="{ fontSize: '1.8rem' }"
          />
          <a-drawer
              title="导航菜单"
              placement="right"
              :visible="state.menuVisible"
              @close="state.menuVisible = false"
          >
            <div
                v-for="(item, idx) in navList"
                :key="idx"
                class="mobile-nav-item"
                @click="handleEvent(item.url)"
            >
              <component :is="item.icon" class="icon-item trigger"/>
              {{ item.title }}
            </div>
          </a-drawer>
        </div>
      </div>
    </div>
    <TagMask
        :visible="state.showTagMask"
        @close="(e) => (state.showTagMask = e)"
    />
    <CateMask
        :visible="state.showCateMask"
        @close="(e) => (state.showCateMask = e)"
    />
  </header>
</template>

<script>
import { reactive, ref } from "vue"
import store from "@/store"
import { useRouter } from "vue-router"
import useUser from "@/hooks/user"
import { useSearch } from "@/hooks"
import { allNavList, roleNav } from "@/config/data"
import { author } from "@/config/settings"
import { selectByPage } from "@/api/article"
import TagMask from "@/components/TagMask"
import CateMask from "@/components/CateMask"

export default {
  name: "Header",
  components: { TagMask, CateMask },
  setup() {
    const { push, replcae } = useRouter()
    const navList = ref([])
    // 获取用户信息判断右侧菜单显示哪些
    const userInfo = store.getters.userInfo
    if (userInfo && userInfo.role) {
      const hasNavIds = roleNav[userInfo.role]
      navList.value = allNavList.filter((item) => hasNavIds.includes(item.id))
    }

    const state = reactive({
      inputVal: "",
      showTagMask: false,
      showCateMask: false,
      menuVisible: false,
    })
    /** 菜单点击时间 */
    const handleEvent = (path) => {
      if (path === "/tag") {
        state.showTagMask = true
      } else if (path === "/category") {
        state.showCateMask = true
      } else if (path === "/logout") {
        const { logout } = useUser()
        logout()
      } else {
        push({ path })
      }
      state.menuVisible = false
    }
    const searchList = ref([])
    const getArticles = async (val) => {
      const { data, code, msg } = await selectByPage({
        page: 1,
        size: 20,
        title: val,
      })
      searchList.value = data.rows.map((e) => {
        return {
          label: e.title,
          value: e.id,
        }
      })
    }

    const { handleSearch } = useSearch(getArticles)
    const handleChange = (e) => {
      console.log(e)
      push({ path: "/article", query: { id: e } })
    }
    return {
      author,
      state,
      navList,
      handleEvent,
      searchList,
      handleSearch,
      handleChange,
    }
  },
}
</script>

<style scoped lang="less">
header {
  position: relative;
  z-index: 99;
  min-height: 6rem;
}

.top-wrapper {
  position: fixed;
  z-index: 91;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0.5rem 0.6rem -0.5rem rgb(133 133 133);

  .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
    height: 6rem;

    .left {
      .logo {
        display: inline-block;
        color: #333;
        font-size: 1.8rem;
        text-shadow: 0.1rem 0.1rem 0.2rem rgb(0 0 0);
        cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur), auto;
      }

      :deep(.search) {
        display: inline-block;
        position: relative;
        margin-left: 2.4rem;
        font-size: 1.6rem;
        padding: 0.8rem 0;
        color: #888;

        .ant-select-selector {
          // visibility: hidden;
          // width: 0;
          transition: all 0.3s;
          background-color: transparent;
          border: none !important;
          box-shadow: none !important;
        }

        &:hover {
          .ant-select-selector {
            width: 15rem;
            visibility: visible;
          }
        }

        &::after {
          position: absolute;
          content: "";
          bottom: 0.5rem;
          left: 0;
          width: 0;
          height: 0.2rem;
          transition: all 0.3s;
          background-color: #4dd2ff;
        }

        &:hover::after {
          width: 100%;
          margin: 0 auto;
        }
      }
    }

    nav.pc-list {
      display: none;
      color: #333;
      font-size: 1.6rem;

      .nav-item {
        position: relative;
        display: inline-block;
        padding: 0.8rem 0;
        margin: 0 1.5rem;
        cursor: url(https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur), auto;

        &::after {
          position: absolute;
          content: "";
          bottom: 0.5rem;
          left: 0;
          width: 0;
          height: 0.3rem;
          transition: all 0.3s;
          background-color: #4dd2ff;
        }

        &:hover::after {
          width: 100%;
          margin: 0 auto;
        }
      }
    }

    .mobile-list {
      display: none;

      .hbx {
        padding-bottom: 0.8rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #c1c1c1;
      }
    }
  }
}

</style>
